<template>
    <div>
    <el-button type="primary" style="margin-right:10px" icon="Plus"  @click="addMenu">新增</el-button>
    <el-divider style="margin: 12px 0"/>
    <el-table
            :data="dataSource"
            v-loading="loading"
            style="width: 100%; margin-bottom: 20px"
            row-key="id"
            border
            default-expand-all
            header-cell-class-name="headerClass"
    >
        <el-table-column align="center" prop="name" label="菜单名"/>
        <el-table-column align="center" prop="nodeType" label="类型" :width="130">
            <template #default="scope">
                <el-tag v-if="scope.row.nodeType==1" type="warning" >
                一级菜单
                </el-tag>
                <el-tag v-else-if="scope.row.nodeType==2" type="primary" >
                二级菜单
                </el-tag>
                <el-tag v-else-if="scope.row.nodeType==3" type="success" >
                按钮
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="path" label="路径"/>
        <el-table-column align="center" prop="viewName" label="组件名">
            <template #default="scope">
                {{scope.row.nodeType==2?scope.row.viewName:"--"}}
            </template>
        </el-table-column>
        <el-table-column align="center" prop="icon" label="图标" :width="100">
            <template #default="scope">
                <el-icon v-if="scope.row.nodeType !== 3" size="20px">
                    <component :is="scope.row.icon" />
                </el-icon>
                <span v-else>--</span>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="updateTime" label="更新时间" show-overflow-tooltip >
            <template #default="scope">
                {{moment(scope.row.updateTime).format("yyyy-MM-DD HH:mm:ss")}}
            </template>
        </el-table-column>
        <el-table-column align="center"  label="操作" :width="120">
            <template #default="scope">
                <el-link title="修改" type="primary" @click="updateMenu(scope.row.id)">
                    修改
                </el-link>
                &nbsp;
                <el-popconfirm title="删除？" @confirm="deleteNode(scope.row.id)"  @cancel="">
                    <template #reference>
                        <el-link type="danger" title="删除">
                            删除
                        </el-link>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <ModMenu @close="transData.isOpen=false" @reload=load :id=transData.id :isOpen="transData.isOpen" :openType=transData.openType />
    </div>
</template>

<script setup>
    import { ref,reactive,onMounted,computed } from 'vue'
    import request from '@/utils/request.js'
    import ModMenu from '@/views/system/components/ModMenu.vue'
    let modMenu = ref()
    let loading = ref(true)
    let dataSource = reactive([])
    const defaultProps = {
        children: 'children',
        label: 'name',
        id:"id"
    }
    let transData = reactive({})
    onMounted(() => {
        load()
    })

    function load() {
        request.get(`/api/menu/getMenus`).then(resp => {
            dataSource.splice(0, dataSource.length)
            dataSource.push(...resp)
            loading.value = false
        })
    }

    const deleteNode = (nodeId) => {
        request.get(`/api/menu/delete/${nodeId}`).then(resp => {
            load()
        })
    }

    function addMenu() {
        transData.openType="add"
        transData.isOpen = true
    }
    function updateMenu(id) {
        transData.openType="edit"
        transData.id = id
        transData.isOpen = true
    }
</script>

<style lang="css" scoped>

    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>
